<template>
  <div style="text-align: left">
    <el-button
      class="add-button"
      type="success"
      @click="dialogFormVisible = true"
    >添加角色</el-button>
    <el-dialog
      title="添加角色"
      :visible.sync="dialogFormVisible"
      width="25%"
      @close="clear"
    >
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="rules"
        label-position="left"
        label-width="0px"
      >
        <el-form-item prop="name">
          <el-input
            v-model="roleForm.name"
            type="text"
            auto-complete="off"
            placeholder="角色名"
          />
        </el-form-item>
        <el-form-item prop="nameZh">
          <el-input
            v-model="roleForm.nameZh"
            type="text"
            auto-complete="off"
            placeholder="角色描述"
          />
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 40%;background: #505458;border: none"
            @click="createRole"
          >添加</el-button>
        </el-form-item>
        <el-form-item prop="username">
          <el-tag type="danger">初始权限:无(需添加后进行分配)</el-tag>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RoleCreate',
  data() {
    return {
      dialogFormVisible: false,
      rules: {
        name: [{ required: true, message: '角色名不能为空', trigger: 'blur' }]
      },
      checked: true,
      roleForm: {
        name: '',
        nameZh: ''
      }
    }
  },
  methods: {
    clear() {
      this.roleForm = {
        name: '',
        nameZh: ''
      }
    },
    createRole() {
      this.$axios
        .post('/api/admin/role', this.roleForm)
        .then(resp => {
          if (resp.status === 200) {
            this.$alert(resp.data.data, '提示', {
              confirmButtonText: '确定'
            })
            this.clear()
            this.$emit('onSubmit')
          }
        })
        .catch(error => {})
      this.dialogFormVisible = false
    },
    // 单条删除
    handleDelete(index, row) {
      console.log(row.id)
      const _id = row.id
      this.$axios
        .delete('/admin/user/del', { data: { id: _id }})
        .then(resp => {
          // console.log(resp);
          if (resp.status === 200) {
            this.$message.success(resp.data.data)
            this.reload()
          }
        })
        .catch(error => {
          this.$message.error(error.response.error)
          this.reload()
        })
    },
    // 批量删除
    delchoose() {
      console.log('---------------------------')
      // 监听选中框的个数，定义变量承载选中的个数
      const length = this.multipleSelection.length
      console.log(length)
      if (length < 2) {
        this.$message.error('请至少选择两条数据')
      } else {
        for (let i = 0; i < length; i++) {
          // console.log(this.multipleSelection[i])
          this.delarr.push(this.multipleSelection[i].id)
          console.log(this.delarr[i])
        }
        // let resdata = JSON.parse(JSON.stringify(this.delarr));
        const resdata = JSON.stringify(this.delarr)
        console.log(resdata)
        this.$axios
          .delete('/admin/user/delMore', {
            params: {
              users: this.delarr
            },
            paramsSerializer: params => {
              return this.$qs.stringify(params, { indices: false })
            }
          })
          .then(resp => {
            // console.log(resp);
            if (resp.status === 200) {
              this.$message.success(resp.data.data)
              this.reload()
              console.log(resp)
            }
          })
          .catch(error => {
            this.$message.error(error.response.error)
            this.reload()
          })
      }
    }
  }
}
</script>

<style scoped>
.add-button {
  margin: 18px 0 0 10px;
}
</style>
